<template>
    <el-row>
        <el-col style="margin: 20px 0 20px 20px;">
            分配订单
        </el-col>
        <el-col>
            <el-row>
                <el-col style="margin-left: 20px;" :span="2">
                   <span v-if="orders.ordeSource==1" style="background-color: #b7b7b7; color: white; padding: 3px 10px; border-radius: 5%;">淘宝</span>
                   <span v-else style="background-color: #b7b7b7; color: white; padding: 3px 10px; border-radius: 5%;">美团</span>
                </el-col>
                <el-col :span="4">
                    订单编号：<span style="margin-right: 50px;">{{ orders.recordId }}</span>
                </el-col>
                <el-col :span="6">
                    录单时间：<span>{{ time }}</span>
                </el-col>
                <el-col :span="6">
                    <span v-if="orders.staffName!=null&&orders.staffName!=''&&orders.outTime!=null&&orders.outTime!=''">派单时间：{{ time2 }}</span>
                </el-col>
            </el-row>
        </el-col>
        <el-col style="padding-left: 135px; margin-top: 15px;" :span="6">
            当前状态：<span style="color: orange;">{{ status[orders.status] }}</span>
        </el-col>
        <el-col :span="6" style="margin-top: 15px;margin-left: 19px;">
            <span v-if="orders.staffName!=null&&orders.staffName!=''&&orders.outTime!=null&&orders.outTime!=''">服务阿姨：{{ orders.staffName }}</span>
        </el-col>
    </el-row>
    <div style="margin-left: 20px; margin-top: 30px; border: solid 1px #eeeeee; width: 80%;">
        <div style="background-color: #eeeeee; height: 40px; padding: 10px 0 10px 20px; font-weight:bold;">客户信息</div>
        <el-row style="margin: 20px 0 20px 20px;">
            <el-col>
                <el-row>
                    <el-col :span="6">客户姓名：{{ orders.vipName }}</el-col>
                    <el-col :span="6">客户电话：{{ orders.vipTel }}</el-col>
                    <el-col :span="9">客户地址：{{  orders.vipSheng+orders.vipShi+orders.vipQu+orders.vipXiangxi }}</el-col>
                </el-row>
            </el-col>
            <el-col style="margin-top: 15px;">
                <el-row>
                    <el-col :span="6">客户类型：{{shuxing[orders.vipProperty-1] }}</el-col>
                    <el-col :span="6">客户属性：{{ shuxing[orders.vipProperty-1] }}</el-col>
                    <el-col :span="6">房间属性：{{ orders.buildType }}</el-col>
                </el-row>
            </el-col>
            <el-col style="margin-top: 15px;">
                <el-row>
                    <el-col :span="6">服务类型：{{fuwu[orders.staffProperty-1] }}</el-col>
                    <el-col :span="6">服务总价：{{  orders.price }}</el-col>
                    <el-col :span="6">风控金：{{ orders.dangerMoney }}</el-col>
                </el-row>
            </el-col>
            <el-col style="margin-top: 15px;">
                <el-row>
                    <el-col >期望时间：{{orders.wishTime }}{{ shuzhu[orders.time - 1] }}</el-col>
                </el-row>
            </el-col>
            <el-col style="margin-top: 15px;">
                <el-row>
                    <el-col :span="10">客户标签：{{orders.vipTag }}</el-col>
                    <el-col :span="5">备注：{{orders.remark }}</el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
    <div style="margin-left: 20px; margin-top: 30px; border: solid 1px #eeeeee; width: 80%;">
        <div style="background-color: #eeeeee; height: 40px; padding: 10px 0 10px 20px; font-weight:bold;">上门时间</div>
        <div style="padding: 15px 10px 20px 30px;">
            请选择日期：<el-date-picker
                        clearable
                        v-model="orders.wishTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择期望时间"
                    >
                    </el-date-picker>
                    <br>
            请选择档期：<el-radio-group v-model="orders.outTime" style="margin-top: 20px;">
                        <el-radio
                            style="width: 140px"
                            value="2"
                            size="large"
                            border
                        >
                            <template #default> 上午8:00-10:00 </template>
                        </el-radio>
                        <el-radio
                            style="width: 145px"
                            value="3"
                            size="large"
                            border
                            >上午10:30-12:30</el-radio
                        >
                        <el-radio
                            style="width: 140px"
                            value="4"
                            size="large"
                            border
                            >下午2:00-4:00</el-radio
                        >
                        <el-radio
                            style="width: 145px"
                            value="5"
                            size="large"
                            border
                            >下午4:30-6:30</el-radio
                        >
                    </el-radio-group>
        </div>
    </div>
    <div style="margin-left: 20px; margin-top: 30px; border: solid 1px #eeeeee; width: 80%;">
        <div style="background-color: #eeeeee; height: 40px; padding: 10px 0 10px 20px; font-weight:bold;">服务阿姨<span v-if="orders.staffName!=null" style="color: #5ea1f9; font-size: 12px; margin-left: 20px;">已选择{{ orders.staffName }}</span></div>
        <div style="padding: 15px 10px 20px 30px;">
            <el-table  ref="table" :data="staffList"  v-loading="loading" >
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="序号" align="center" prop="staffId"/>
                <el-table-column label="阿姨姓名" align="center" prop="staffName"/>
                <el-table-column label="电话号" align="center" prop="staffTel"/>
            </el-table>
        </div>
    </div>
    <div style="margin-top: 10px;">
        <el-button v-if="orders.staffName!=null&&orders.staffName!=''&&orders.outTime!=null&&orders.outTime!=''" @click="return1">确认修改</el-button>
        <el-button v-if="orders.staffName!=null&&orders.staffName!=''&&orders.outTime!=null&&orders.outTime!=''" @click="return2">取消修改</el-button>
        <el-button v-else @click="return1">确认派单</el-button>
    </div>
</template>
<script setup>
    import { defineProps, ref,defineEmits } from 'vue';
    import { parseTime } from '../../../../utils/ruoyi';
    import { listStaff } from '../../../../api/system/staff';
    let emits = defineEmits(['change'])
    let props = defineProps({
        order: {
            type: Object,
            default: () => {
                return {}
            }
        }
    })
    const shuzhu = ref([
        '全天',
        '上午8:00-10:00',
        '上午10:30-12:30',
        '下午2:00-4:00',
        '下午4:30-6:30'
    ])
    const leixing = ref(['临时', '包月', '包季'])
    const shuxing = ref(['个人', '企业'])
    const fuwu = ref(['','日常保洁', '家电清洗', '大扫除','家电维修'])
    const status = ref(['未收款未派单', '已收款未派单', '已收款已派单'])
    let orders = ref(props.order)
    let receiveTime = ref(orders.value.receiveTime)
    let time = parseTime(receiveTime.value)
    let time2 = parseTime(orders.value.sendTime)
    const { proxy } = getCurrentInstance()
    const staffList = ref()
    const loading = ref(true)
    const table=ref()
    const aid=ref([])
    // 返回
    function return1() {
        aid.value = table.value.getSelectionRows().map((item) => item.staffName)
        if (aid.value.length > 1) {
            proxy.$modal.msgError('只能选一个')
        } else if (aid.value.length==0) {
            proxy.$modal.msgError('请至少选一个')
        }else {
            orders.value.staffName = aid.value.join('');
            let date = new Date();
            orders.value.sendTime = date
            console.log(orders.value);
            emits('change', {
                ...orders.value
            })
        }
    }
    // 取消修改
    function return2() {
        emits('change')
    }
    // 查询阿姨
    function getList2() {
        loading.value = true;
        listStaff(staffList.value).then(response => {
        console.log(response);
        staffList.value = response.rows;
        // total.value = response.total;
        loading.value = false;
     });
    }
    getList2()
</script>
